import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';

class Notice extends Component {
    static propTypes = {
        banner: PropTypes.bool,
        type: PropTypes.string.isRequired,
        className: PropTypes.string
    };

    static defaultProps = {
        banner: false
    };

    render() {
        const { className, banner, type, children, ...others } = this.props;
        let classNames = `${styles.content}`;
        if (type === 'success') {
            classNames += ` ${styles.success}`;
        } else if (type === 'error') {
            classNames += ` ${styles.error}`;
        } else if (type === 'warning') {
            classNames += ` ${styles.warning}`;
        } else if (type === 'info') {
            classNames += ` ${styles.info}`;
        }
        return (
            <div className={className} style={banner ? {display: 'block'} : {display: 'inline-block'}} {...others}>
                <div className={classNames}>{children}</div>
            </div>
        );
    }
}

export default Notice;